<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.item {
				color: red;
			}
			.back {
				background-color: blue;
			}
		</style>
	</head>

	<body>
		<ul>
			<h1>标题</h1>
			<li class="item">1</li>
			<li class="item">2</li>
			<li class="item">3</li>
		</ul>
		<script>
			// style
			document.querySelector("h1").style.color = "yellow";
			// className
			document.querySelector("h1").className = "back";
			// classList
			document.querySelector("h1").classList.add("back");
			// setInterval
			let i = 0;
			let interval = setInterval(function () {
				i++;
				document.querySelector(".item").innerHTML = i;
			}, 1000);
			// clearInterval
			clearInterval(interval);
		</script>
	</body>
</html>
